import React,{Component} from 'react'
import {Link,browserHistory} from 'react-router';
import * as pub from '../../config/public';
class PersonalCenter extends Component {
	constructor(args) {
		super();
		this.state = {
			activeIndex: 0,
			headItems: [
			// {
			// 	text: '个人名片',
			// 	href: '/PersonalCenter/Card'
			// }, {
			// 	text: '我的蜂行圈',
			// 	href: '/PersonalCenter/MyArticle'
			// }, {
			// 	text: '动态',
			// 	href: '/PersonalCenter/Dynamic'
			// }, {
			// 	text: '收藏夹',
			// 	href: '/PersonalCenter/Collector'
			// }, {
			// 	text: '图书馆',
			// 	href: '/PersonalCenter/Library'
			// }, {
			// 	text: '积分商城',
			// 	href: '/PersonalCenter/PointShop'
			// }, {
			// 	text: '积分详情',
			// 	href: '/PersonalCenter/PointDetail'
			// }, 
			]
		}
	}
	checkPage(page) {
		let personal_menu = pub.user.menu.personal_menu;
		if(personal_menu.length === 0){
			pub.jumpHistory.push('/Entrance');
			return;
		}
		let headItems = [];
		for(let x of personal_menu){
			headItems.push({
				href:x.runscript,
				text:x.nodeName
			})
		}
		this.setState({
			headItems
		})

		let activeIndex = 0;
		for (let x of headItems) {
			if (x.href === page) {
				break;
			}
			activeIndex++;
		}

		this.setState({
			activeIndex: activeIndex
		})
	}
	componentWillMount() {
		this.checkPage(this.props.location.pathname);
	}
	componentWillReceiveProps(nextProps) {
		this.checkPage(nextProps.location.pathname)
	}
	render(){
		return(
		<div className="wrapper bg-F0F4F6">
			<div className="layout clearFix" style={{paddingTop:'20px'}}>
               
               	<div className={this.state.activeIndex===2||this.state.activeIndex===3||this.state.activeIndex===4?"left-layout":""}>
				     <div className="filter clearFix">
				     	<ul className="filter-ul clearFix">
     
				       {
		                	this.state.headItems.map((item, index) => {
		                		let className = this.state.activeIndex === index ? 'active' : '';
		                		return (
		                			<li key={index}><Link to={item.href} className={className}>{item.text}</Link></li>
		                		)
		                	})
		                }
     
				     	</ul>
				     </div>
				</div>

			   {this.props.children}

			</div>
	    </div>
			)
	}
}
export default PersonalCenter;